<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
    <style>
        body {
            text-align: center
        }

        #divcss5 {
            margin: 0 auto;
            border: 1px solid #000;
            width: 900px;
            height: 500px
        }

        #nav {
            width: 730px;
            height: 50px;
            background-color: #DFD4B5;
            margin: auto;
        }

        /*子类选择器 > */
        #nav > ul {
            font-weight: bold;
            font-size: small;
            line-height: 50px;
            margin: auto;
        }

        #nav > ul > li {
            list-style-type: none;
            float: left;
        }

        #nav span {
            padding-left: 10px;
            padding-right: 10px;
        }

        li:hover {
            color: blue;
            text-decoration: underline;
            cursor: pointer;
        }

        li:active {
            color: red;
        }
    </style>
</head>
<body>
<div id="nav">
    <ul>
        <li><a href="{{ url_for('nav') }}">首页<span>|</span></li>
        <li><a href="{{ url_for('zxt') }}">折线图<span>|</span></li>
        <li><a href="{{ url_for('bing') }}">饼状图<span>|</span></li>
        <li><a href="{{ url_for('three_d') }}">3D图<span>|</span></li>
        <li><a href="{{ url_for('rose') }}">玫瑰图<span>|</span></li>
        <li><a href="{{ url_for('ldt') }}">漏斗图<span>|</span></li>
        <li><a href="{{ url_for('zzt') }}">柱状图<span>|</span></li>
        <li><a href="{{ url_for('wordcloud') }}">词云图<span>|</span></li>
        <li><a href="{{ url_for('sdt') }}">散点图</li>
    </ul>
</div>
<div id="divcss5">
    <div id="00c4c70233b7482b9786691b0c81ea74" class="chart-container" style="width:900px; height:500px;"></div>
</div>
<script>
    var chart_00c4c70233b7482b9786691b0c81ea74 = echarts.init(
        document.getElementById('00c4c70233b7482b9786691b0c81ea74'), 'dark', {renderer: 'canvas'});
    var option_00c4c70233b7482b9786691b0c81ea74 = {
        "animation": true,
        "animationThreshold": 2000,
        "animationDuration": 1000,
        "animationEasing": "cubicOut",
        "animationDelay": 0,
        "animationDurationUpdate": 300,
        "animationEasingUpdate": "cubicOut",
        "animationDelayUpdate": 0,
        "series": [
            {
                "type": "pie",
                "clockwise": true,
                "data": [
                    {
                        "name": 0,
                        "value": 1
                    },
                    {
                        "name": 1,
                        "value": 34
                    },
                    {
                        "name": 2,
                        "value": 125
                    },
                    {
                        "name": 3,
                        "value": 148
                    },
                    {
                        "name": 4,
                        "value": 189
                    },
                    {
                        "name": 5,
                        "value": 137
                    },
                    {
                        "name": 6,
                        "value": 143
                    },
                    {
                        "name": 7,
                        "value": 123
                    },
                    {
                        "name": 8,
                        "value": 86
                    },
                    {
                        "name": 9,
                        "value": 75
                    },
                    {
                        "name": 10,
                        "value": 75
                    },
                    {
                        "name": 11,
                        "value": 59
                    },
                    {
                        "name": 12,
                        "value": 61
                    },
                    {
                        "name": 13,
                        "value": 33
                    },
                    {
                        "name": 14,
                        "value": 30
                    },
                    {
                        "name": 15,
                        "value": 28
                    },
                    {
                        "name": 16,
                        "value": 36
                    },
                    {
                        "name": 17,
                        "value": 19
                    },
                    {
                        "name": 18,
                        "value": 16
                    },
                    {
                        "name": 19,
                        "value": 10
                    },
                    {
                        "name": 20,
                        "value": 12
                    }
                ],
                "radius": [
                    "30%",
                    "75%"
                ],
                "center": [
                    "50%",
                    "55%"
                ],
                "roseType": "area",
                "label": {
                    "show": true,
                    "position": "top",
                    "margin": 8,
                    "formatter": "\u957f\u5ea6\u4e3a{b}\u7684\u5f39\u5e55:{c}\u6761"
                },
                "rippleEffect": {
                    "show": true,
                    "brushType": "stroke",
                    "scale": 2.5,
                    "period": 4
                }
            }
        ],
        "legend": [
            {
                "data": [
                    0,
                    1,
                    2,
                    3,
                    4,
                    5,
                    6,
                    7,
                    8,
                    9,
                    10,
                    11,
                    12,
                    13,
                    14,
                    15,
                    16,
                    17,
                    18,
                    19,
                    20
                ],
                "selected": {},
                "type": "scroll",
                "show": true,
                "left": "left",
                "orient": "vertical",
                "padding": 5,
                "itemGap": 10,
                "itemWidth": 25,
                "itemHeight": 14
            }
        ],
        "tooltip": {
            "show": true,
            "trigger": "item",
            "triggerOn": "mousemove|click",
            "axisPointer": {
                "type": "line"
            },
            "textStyle": {
                "fontSize": 14
            },
            "borderWidth": 0
        },
        "color": [
            "#EFEBDC",
            "red",
            "blue",
            "pink",
            "#933D50 ",
            "purple",
            "#327662",
            "#28713E",
            "yellow",
            "#D14152",
            "white",
            "brown"
        ],
        "title": [
            {
                "text": "\u5f39\u5e55\u4fe1\u606f\u957f\u5ea6\u73ab\u7470\u56fe",
                "right": 20,
                "padding": 5,
                "itemGap": 10,
                "textStyle": {
                    "color": "white"
                }
            }
        ],
        "toolbox": {
            "show": true,
            "orient": "horizontal",
            "itemSize": 15,
            "itemGap": 10,
            "left": "80%",
            "bottom": 20,
            "feature": {
                "saveAsImage": {
                    "type": "png",
                    "backgroundColor": "auto",
                    "connectedBackgroundColor": "#fff",
                    "show": true,
                    "title": "\u4fdd\u5b58\u4e3a\u56fe\u7247",
                    "pixelRatio": 1
                },
                "restore": {
                    "show": true,
                    "title": "\u8fd8\u539f"
                },
                "dataView": {
                    "show": true,
                    "title": "\u6570\u636e\u89c6\u56fe",
                    "readOnly": false,
                    "lang": [
                        "\u6570\u636e\u89c6\u56fe",
                        "\u5173\u95ed",
                        "\u5237\u65b0"
                    ],
                    "backgroundColor": "#fff",
                    "textareaColor": "#fff",
                    "textareaBorderColor": "#333",
                    "textColor": "#000",
                    "buttonColor": "#c23531",
                    "buttonTextColor": "#fff"
                },
                "dataZoom": {
                    "show": true,
                    "title": {
                        "zoom": "\u533a\u57df\u7f29\u653e",
                        "back": "\u533a\u57df\u7f29\u653e\u8fd8\u539f"
                    },
                    "icon": {}
                },
                "magicType": {
                    "show": true,
                    "type": [
                        "line",
                        "bar",
                        "stack",
                        "tiled"
                    ],
                    "title": {
                        "line": "\u5207\u6362\u4e3a\u6298\u7ebf\u56fe",
                        "bar": "\u5207\u6362\u4e3a\u67f1\u72b6\u56fe",
                        "stack": "\u5207\u6362\u4e3a\u5806\u53e0",
                        "tiled": "\u5207\u6362\u4e3a\u5e73\u94fa"
                    },
                    "icon": {}
                },
                "brush": {
                    "icon": {},
                    "title": {
                        "rect": "\u77e9\u5f62\u9009\u62e9",
                        "polygon": "\u5708\u9009",
                        "lineX": "\u6a2a\u5411\u9009\u62e9",
                        "lineY": "\u7eb5\u5411\u9009\u62e9",
                        "keep": "\u4fdd\u6301\u9009\u62e9",
                        "clear": "\u6e05\u9664\u9009\u62e9"
                    }
                }
            }
        }
    };
    chart_00c4c70233b7482b9786691b0c81ea74.setOption(option_00c4c70233b7482b9786691b0c81ea74);
</script>
</body>
</html>
